import React, { useState, useEffect } from 'react'
import { Row, Col, Form, Input, Typography,  Button, DatePicker, Table, Radio, Divider, ConfigProvider} from "antd"
import { ColumnsType } from 'antd/lib/table';
import produce from '../../mobx/store/produce';
import { observer } from 'mobx-react';
import { ajax } from '../../api';
import active from '../../mobx/store/active';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

const { RangePicker } = DatePicker;
const { Title } = Typography
function ActivityAdd({history}:any) {

    const [form] = Form.useForm()
    const { producelist,cproducelist }: any = produce
    const {activelist}:any = active

    useEffect(() => {
        cproducelist({})
    }, [])

    const onFinish = async (value: any) => {
        console.log(value);
        value.key=activelist.length+1
        let { code, result }: any = await ajax.addactive(value)
        if (code == 200) {
            history.push('/main/activity/list')
        }
    }

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };


    const columns = [
        {
            title:'id',
            render: (text: any, value: any, index: number) => <b>{index + 1}</b>,
        },
        {
            title: '商品名称',
            dataIndex: 'pname',
            render: (text: string) => <a>{text}</a>,
        },
        {
            title: '商品原价',
            dataIndex: 'price',
            width: 150,
        },
        {
            title: '活动价格',
            dataIndex: 'discount',
            render: (text: string) => <b>{text}</b>,
        },

    ];

    interface DataType {
        key: React.Key;
        name: string;
        price: number;
        discount: number
    }

    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(selectedRowKeys,selectedRows);
        },

    };

    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    return (
        <div style={{ width: "100%", height: "100%" }}>
            <Title level={3} style={{ margin: 30 }}> 活动添加 </Title>
            <Row style={{ display: "block", width: "700px" }}>
                <Col span={24}>
                    <Form
                        name="basic"
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        form={form}
                        wrapperCol={{ span: 24 }}
                    >
                        <Form.Item
                            label="活动名称"
                            name="aname"
                            rules={[{ required: true, message: '请输入活动名称' }]}
                            wrapperCol={{ offset: 0, span: 12 }}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="ValidTime"
                            label="有效时间"
                            rules={[{ required: true, message: '请选择时间' }]}
                        >
                            <RangePicker locale={locale} showTime format="YYYY-MM-DD HH:mm" />
                        </Form.Item>

                        <Form.Item
                            name="ChooseGoods"
                            label="&选择商品"
                        >
                            <Table
                                dataSource={producelist}
                                sticky
                                columns={columns}
                                id="table"
                                rowSelection={{type:selectionType,...rowSelection,}}
                                pagination={{ pageSize: 5 }}
                            />
                        </Form.Item>

                        <Form.Item  style={{ float: "right" }}>
                            <Button type="primary" htmlType="submit" >添加活动</Button>
                        </Form.Item>
                        
                    </Form>
                </Col>
            </Row>
        </div >
    )
}

export default observer(ActivityAdd)